<!DOCTYPE html>
<html>
  <head>
    <title>mycart.html</title>
    
    <!-- 指定浏览器编码是 utf-8 -->
    <meta charset="utf-8">
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>


	<!-- 大盒子box -->
	<div>
		<!-- 上
				style 嵌入到元素内部，也是写css样式
					border    边框
						1px solid #DDDDDD
						
						
					text-align: center;
						
					取颜色小技巧： QQ截图  按住ctrl就可以看到
					
					
					line-height： 行高，可以让文字垂直居中
					
					background-color: 背景颜色
					
					padding-left: 左内边距
					
		 -->
		<div style="border:1px solid #DDDDDD; line-height: 60px; background-color: #F7F7F7; padding-left: 10px;">
			我的购物车
		</div>
		
		<!-- 中 -->
		<div>
		
			<table>
				<thead>
					<tr>
						<th>
							<!-- 多选框 -->
							<input type="checkbox" />
							全选
						</th>
						<th>
							商品
						</th>
						<th>
							单价
						</th>
						<th>
							数量
						</th>
						<th>
							合计
						</th>
					</tr>
				</thead>
				<tbody id="cartList">
				
				</tbody>
			</table>
		
		</div>
		
		<!-- 下 -->
		<div></div>
	</div>    


  </body>
</html>


<!-- 1. 引入jQuery文件：-->
<script src="js/jquery.js"></script>


<!-- 2. 使用jQuery文件-->
<script>


	// 前端获取后端数据的一种方式： Ajax
   
   $.ajax({
	 url: "servlet/CartServlet", // 地址
	 dataType: "JSON",           // 会自动把 字符串转换成 js 的对象
	 success: function(res) {    // 数据回来之后自动调用这里
		 
		 // 类似： JSON： [ {name: "XXX", price: 100}  ]
	 	 //  字符串 ==> JS的对象 ，再去获取数据
	 	 
	 	 //  因为结果是数组，所以这里用 [] 访问
	 
	 
	for (var i = 0; i < res.length; i++) { 	 
	 	 
	 	 
	 	 var good = res[i];   // 第i个商品
	 	
	 	 
	 	 var h = "";
	 	 
	 	 h += "\
				<tr> \
				<td> \
					<input type='checkbox' class='cb'/> \
				</td>\
				<td>\
					<div style='float:left;'>\
						<img src='img/\
						"
							+
								good.imgPath
							+
						"\
						' /> \
					</div> \
					<div style='float:left;'>\
						<div style='width: 400px;'>\
				"
					+
						good.name   
					+
				"\
						</div>\
						<div style='color: #888888; font-size: 12px;'> \
				"
					+
						good.position   
					+
				"\
						</div>\
					</div>\
				</td>\
				<td>\
					<div style='color: #888888; font-size: 12px; text-decoration:line-through;'>\
						￥198.00\
					</div>\
					<div style='font-weight: bolder;' id='price'>\
				"
					+
						good.price   
					+				
				"\
					</div>\
				</td>\
				<td>\
					<div style='border:1px solid #dddddd; height: 18px;'>\
						<div style='float:left' id='btn1'>-</div>\
						<div style='float:left; position: relative;'>\
							<input type='text' id='num' style='width:20px; border:1px solid #dddddd; border-top:none; border-bottom: none; position:absolute; top:0; left:0'/>\
						</div>\
						<div style='float:left;margin-left: 20px;'>+</div>\
					</div>\
				</td>\
				<td id='resutl_1'></td>\
				<td></td>\
			</tr>\
	 	 ";
			
		 $("#cartList").append(h)
		 
	}
	 }
   })














$("#btn1").click(function() {
	var n = $("#num").val() - 1;
	
	// 更新num的值
	$("#num").val(n);	
})




// $(".cb") 代表找到所有使用cb样式的元素
$(".cb").click(function() {
	// 当前点击的元素
	//   this
	//   $(this) 转换为jQuery对象
	//     .is(':checked')  获取当前checkbox 是否选中
	///            true 选中
	///            false 选中
	var v = $(this).is(':checked');
	
	if (v == true) {
		// 当前行的颜色变黄
		//   parent() 父元素
		$(this).parent().parent().css("background", "yellow");
	} else {
		// 当前行的颜色变白
		$(this).parent().parent().css("background", "white");
	
	}
})

</script>


<!-- 

1. + - 美化

2. 点击 +，- 有动作（演示div可以实现按钮的效果）

3. 点击勾选框，整行变颜色

 -->

